<template>
    <div class="flex flex-bet  tool-bar plr10">
        <div>
            <a-radio-group size="small" :value="programmeValue" @change="selectProgramme">
                <a-radio-button :value="item.name" v-for="(item,index) in programmeBtn.pre" :key="index">
                    {{ item.name }}
                </a-radio-button>
            </a-radio-group>
            <a-dropdown style="margin-left:-1px" class="" size="small">
                <a-menu slot="overlay" @click="selectMore">
                    <a-menu-item styl v-for="(item,index) in programmeBtn.suf" :key="index">
                        {{ item.name }}
                    </a-menu-item>
                </a-menu>
                <a-button size="small">更多方案
                    <a-icon type="down"/>
                </a-button>
            </a-dropdown>
            <a-button size="small" type="primary" class="ml5" @click="$emit('advanced')">
                高级筛选
                <a-icon type="caret-down"/>
            </a-button>
        </div>
        <div>
            <a-select size="small" :default-value="modeValue" style="width: 150px" @change="changeMode">
                <a-select-option v-for="(item,index) in modeMenu" :key="index">
                    {{ item }}
                </a-select-option>
            </a-select>
        </div>
    </div>

</template>

<script>
export default {
    name: 'Toolbar',
    data () {
        return {
            searchValue: '',
            menu: ['导出Excel', '转单', '其他'],
            programmeValue: '',
            modeMenu: ['切换父子级模式', '切换仅一级模式'],
            modeValue: '切换父子级模式'
        }
    },
    props: {
        programme: {
            type: Array
        }
    },
    computed: {
        programmeBtn () {
            const pre = this.programme && this.programme.filter((item, index) => {
                return index <= 2
            })
            const suf = this.programme && this.programme.filter((item, index) => {
                return index > 2
            })
            return {
                pre,
                suf
            }
        }
    },
    methods: {
        // 选择方案
        selectProgramme (e) {
            this.programmeValue = e.target.value
            this.$emit('selectProgramme', { value: this.programmeValue })
        },
        // 更多方案被点击
        selectMore (e) {
            console.log(e)
            this.programmeValue = this.programmeBtn.suf[e.key].name
            this.$emit('selectProgramme', { value: this.programmeValue })
        },
        // 切换一二级模式
        changeMode (value) {
            console.log(value)
            this.modeValue = value
            console.log(this.modeValue)
            this.$emit('selectMode', { value: this.modeValue })
        }
    }
}
</script>

<style scoped lang="scss">
.tool-bar {
    height: 50px;
    background: white;
}
</style>
